<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右切换无缝轮播</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; list-style: none; }
        .banner{width: 400px; height: 300px; border: 4px solid #ccc; margin: 100px auto; position: relative;}
        .show{width: 100%; height: 100%; position: relative; overflow: hidden; }
        .banner ul{position: absolute; left: 0; top: 0; }
        .banner ul li{float: left; cursor: pointer; width: 400px; height: 307px;}
        .banner ol{position: absolute; bottom: -30px; right: 20px; }
        .banner ol li{width: 13px; height: 13px; background: grey; float: left; margin:0 3px; cursor: pointer; }
        .banner li.current{background: red;}
        .prev,.next{width: 50px; height: 50px; line-height: 50px; background: grey; position: absolute; left: -60px; top: 127px; cursor: pointer; text-align:center; font-size: 20px;}
        .next{background-position: right 0; left: auto; right: -60px; }
    </style>
</head>
<body>
<div class="banner">
    <div class="show">
        <ul>
            <li style="background-color: pink;">图1</li>
            <li style="background-color: royalblue;">图2</li>
            <li style="background-color: silver;">图3</li>
            <li style="background-color: orange;">图4</li>
            <li style="background-color: darkkhaki">图5</li>
        </ul>
    </div>
    <span class="prev">	&lt;</span>
    <span class="next">	&gt;</span>
    <ol>
    </ol>
</div>
</body>
</html>

<script type="text/javascript" src="../../../assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        var len = $('.banner ul li').length;
        $('.banner ul').append($('.banner ul li:first').clone(true));

        var w = $('.banner').width();
        $('.banner ul').width(w * (len+1));

        //生成指示器
        for( var i=0; i<len; i++ ){
            $('.banner ol').append('<li></li>')
        }
        $('.banner ol li').eq(0).addClass('current');

        var pointIndex = 0;
        var loopIndex = 0;
        var timer = null;
        var speend1 = 2000;
        var speend2 = 500;

        function move(){
            var moveLeft = -w * loopIndex;
            $('.banner ol li').eq(pointIndex).addClass('current').siblings().removeClass('current');
            $('.banner ul').stop().animate({'left': moveLeft+'px'},speend2);
        }
        function autoRun(){
            pointIndex++;
            loopIndex++;
            if(pointIndex > len-1){pointIndex = 0}
            if(loopIndex > len){
                loopIndex = 1;
                $('.banner ul').css('left','0');
            }
            move();
        }
        timer = setInterval(autoRun,speend1);
        $('.banner').hover(function(e){
            clearInterval(timer);
        },function(){
            clearInterval(timer);
            timer = setInterval(autoRun,speend1);
        });
        $('.next').click(function(e) {
            autoRun();
        });
        $('.prev').click(function(e) {
            pointIndex--;
            loopIndex--;
            if(pointIndex < 0){pointIndex = len-1}
            if(loopIndex < 0){
                loopIndex = len-1;
                $('.banner ul').css('left',-w*len);
            }
            move();
        });
        $('.banner ol li').click(function(e) {
            var moveLeft = -w * $(this).index();
            $(this).addClass('current').siblings().removeClass('current');
            $('.banner ul').stop().animate({'left': moveLeft+'px'},speend2);
            pointIndex = loopIndex = $(this).index();
        });
    })
</script>